<template>
  
  <div class="admin-review-claim-view">
    <!-- 左侧列表 -->
    <div class="claim-list">
      <div v-for="claim in claimList" :key="claim.id" @click="showClaimDetails(claim)" class="claim-option">
        <div>申领id：{{ claim.id }}</div>
        <div>申领日期：{{ claim.date }}</div>
        <div>申领用户：{{ claim.user.user_name }}</div>
        <div>被申领门户{{ claim.scholar.name }}</div>
      </div>
    </div>

    <!-- 右侧详细内容 -->
    <div class="claim-details">
      <div v-if="selectedClaim" class="top-section">
        <h2>申领人：{{ selectedClaim.user.user_name }}</h2>
        <p>(申领id：{{ selectedClaim.id }})</p>
        <p>申领日期：{{ selectedClaim.date }}</p>
        <p>被申领的门户：{{ selectedClaim.scholar.name }}</p>

      </div>

      <div v-if="selectedClaim" class="middle-section">
      </div>

      <div v-if="selectedClaim" class="bottom-section">
        <el-button @click="rejectClaim" type="danger">驳回</el-button>
        <el-button @click="approveClaim" type="success">通过</el-button>
      </div>
    </div>
  </div>

</template>

<script>
import { req_applyList, req_rejectClaim, req_approveClaim } from '@/api/index.js'
import StarCanvas from "@/views/home-view/StarCanvas.vue";
import { ElMessage } from 'element-plus';

export default {
  name: 'AdminReviewClaimView',
  components: {StarCanvas},
  data() {
    return {
      claimList: [], // 门户申请列表
      selectedClaim: null, // 当前选中的门户申请
    };
  },
  methods: {
    showClaimDetails(claim) {
      // 点击左侧列表项，显示右侧详细内容
      this.selectedClaim = claim;
    },
    rejectClaim() {
      // 驳回门户申请的操作
      const claimId = this.selectedClaim.id;
      req_rejectClaim(claimId)
      .then(response => {
        const errno = response.data.errno;
        const msg = response.data.msg;

        if (errno === 1) {          
          // 驳回成功后，更新前端页面，移除已被驳回的门户申请
          this.claimList = this.claimList.filter(claim => claim.id !== claimId);
          ElMessage.info(msg);
          // 如果还有其他门户申请，选中第一个
          if (this.claimList.length > 0) {
            this.selectedClaim = this.claimList[0];
          } else {
            // 如果没有其他门户申请，清空选中状态
            this.selectedClaim = null;
          }
        } else if (errno === 1001 || errno === 1002 || errno === 1003 || errno === 2001) {
            ElMessage.info(msg);
        } else {
          console.error('Error rejecting portal apply:', msg);
        }
      })
      .catch(error => {
        console.error('Error rejecting portal apply:', error);
      });
    },
    approveClaim() {
      // 通过门户申请的操作
      const claimId = this.selectedClaim.id;

      req_approveClaim(claimId)
        .then(response => {
          const errno = response.data.errno;
          const msg = response.data.msg;

          if (errno === 1) {
            // 更新前端页面，移除已被通过的门户申请
            this.claimList = this.claimList.filter(claim => claim.id !== claimId);
            ElMessage.info(msg);
            // 如果还有其他门户申请，选中第一个
            if (this.claimList.length > 0) {
              this.selectedClaim = this.claimList[0];
            } else {
              // 如果没有其他门户申请，清空选中状态
              this.selectedClaim = null;
            }
          } else if (errno === 1001 || errno === 1002 || errno === 1003 || errno === 2001) {
            ElMessage.info(msg);
          } else {
            console.error('Error approving portal apply:', msg);
          }
        })
        .catch(error => {
          console.error('Error approving portal apply:', error);
        });
    },
  },
  mounted() {
    // 初始化门户申请列表的数据
    this.claimList = [
      { id: 1, 
        date: '2023-11-18', 
        user: {
          "id": 123,
          "user_name": "JohnDoe",
          "email": "john@example.com",
          "type": "normal"
      }, 
        scholar: {
            "id": 456,
            "name": "Dr. Jane Smith"
        } },
        { id: 2, 
        date: '2023-12-18', 
        user: {
          "id": 123,
          "user_name": "zht",
          "email": "zht@example.com",
          "type": "normal"
      }, 
        scholar: {
            "id": 456,
            "name": "Dr. Jane Smith"
        } },
        { id: 2, 
        date: '2023-12-18', 
        user: {
          "id": 123,
          "user_name": "zht",
          "email": "zht@example.com",
          "type": "normal"
      }, 
        scholar: {
            "id": 456,
            "name": "Dr. Jane Smith"
        } },
        
      // 其他门户申请数据...
    ];
    if (this.claimList.length > 0) {
      this.selectedClaim = this.claimList[0];
    }

    // req_applyList()
    //   .then(response => {
    //     const errno = response.data.errno;
    //     const msg = response.data.msg;
    //     const claimList = response.data.claim;

    //     if (errno === 1) {
    //       this.claimList = claimList;

    //       // 默认选中第一个门户申请
    //       if (this.claimList.length > 0) {
    //         this.selectedClaim = this.claimList[0];
    //       }
    //     } else {
    //       console.error('Error fetching portal apply list:', msg);
    //     }
    //   })
    //   .catch(error => {
    //     console.error('Error fetching portal apply list:', error);
    //   });
  },
};
</script>

<style scoped>


.admin-review-claim-view {
  display: flex;
}

.claim-list {
  width: 30%; /* 左侧列表宽度可根据需要调整 */
  border-right: 1px solid #ccc;
  padding: 20px;
  max-height: 553px;
  overflow-y: auto; /* 启用垂直滚动条 */
}

.claim-list > div {
  cursor: pointer;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #eee;
}

.claim-option {
  /* 减缓上升下降速度 */
  background: linear-gradient(#fff 0 0) var(--p, 0) / var(--p, 0) no-repeat;
  transition: .4s, background-position 0s;
  /* 鼠标悬停时的样式 */
  &:hover {
        transform: translateY(-5px);
        box-shadow: 0 0 20px rgba(77, 74, 74, 0.5); /* 外发光效果 */
        
        background: var(--hover); /* 淡灰色 */
    }
}
.claim-details {
  flex: 1;
  padding: 20px;
}

.top-section {
  margin-bottom: 20px;
}

.bottom-section {
  margin-top: 20px;
}

.el-button {
  margin-right: 10px;
}
</style>
